【CSS技巧】画像サイズ問題にさよなら！background-imageで実現するレスポンシブ画像切り替え
ウェブサイトの画像が、デバイスによって表示が崩れてしまう…、画像サイズの調整に悩まされている…。そんな経験はありませんか？
本記事では、CSSのbackground-imageプロパティとメディアクエリを使って、簡単にウェブサイトの画像をレスポンシブ対応する方法を紹介します。これを読めば、もう画像サイズに悩む必要はありません！様々なデバイスで、あなたのウェブサイトを完璧に表現しましょう！
1. background-imageレスポンシブ切り替えとは？
background-imageレスポンシブ切り替えとは、CSSのbackground-imageプロパティとメディアクエリを組み合わせて、画面サイズに応じて表示する背景画像を切り替える手法です。
background-imageプロパティ
CSSのbackground-imageプロパティは、要素の背景に画像を設定するために使用されます。
レスポンシブデザイン
レスポンシブデザインとは、PC、タブレット、スマートフォンなど、様々な画面サイズのデバイスに対して、最適な表示を行うウェブサイトのデザイン手法です。
background-imageレスポンシブ切り替えのメリット
- デバイスごとに最適なサイズの画像を表示できるため、表示速度の向上やデータ通信量の削減につながります。
- ユーザーはどのデバイスからアクセスしても、快適にウェブサイトを閲覧することができます。
2. background-imageレスポンシブ切り替えの実装方法
それでは、実際にbackground-imageプロパティとメディアクエリを使って、レスポンシブ画像切り替えを実装してみましょう。
ステップ1： デフォルトの背景画像を設定する
まずは、body要素などに、デフォルトで表示する背景画像を設定します。
body {
background-image: url('images/default.jpg');
}
ステップ2: メディアクエリを使って画面サイズごとに背景画像を設定する
次に、メディアクエリを使って、画面サイズごとに表示する背景画像を設定します。ここでは、タブレットとスマートフォンの場合の背景画像を設定する例を紹介します。
@media (max-width: 768px) {
body {
background-image: url('images/tablet.jpg');
}
}
@media (max-width: 480px) {
body {
background-image: url('images/mobile.jpg');
}
}
3. background-imageレスポンシブ切り替えのテクニックと注意点
background-imageレスポンシブ切り替えを実装する際の、いくつかのテクニックと注意点を紹介します。
画像形式の選択
WebP形式は、画質を維持しながらファイルサイズを小さくできるため、ウェブサイトの表示速度向上に効果的です。JPEGやPNGも広く使われている画像形式です。
| 形式 | 特徴 |
|---|---|
| WebP | 高画質・低容量。対応ブラウザが増加傾向。 |
| JPEG | 写真など、色の変化が複雑な画像に適している。 |
| PNG | イラストやロゴなど、色の変化が少ない画像に適している。透過画像も扱える。 |
画像サイズの最適化
表示するデバイスに適したサイズの画像を用意することで、無駄なデータ通信量を抑えられます。画像圧縮ツールを利用するのも有効です。
コードの簡潔化
CSSの記述が冗長にならないよう、簡潔なコードを心がけましょう。CSSプリプロセッサ（Sass, Lessなど）の活用も有効です。
4. 案例紹介
background-imageレスポンシブ切り替えを実装しているウェブサイト例
1. メディアクエリを用いたCSS切り替え
例1: Apple
-
特徴: 画面サイズに応じて、ヒーローエリアの背景画像が切り替わります。シンプルながらも効果的な実装で、多くのウェブサイトで見られます。
例2: Spotify
-
特徴: 画面サイズやデバイスの向きに応じて、背景画像のサイズや位置が調整されます。コンテンツの視認性を保ちつつ、美しいデザインを実現しています。
メリット
-
実装が比較的容易
-
HTMLの記述量が増加しない
デメリット
-
画像の読み込み数が変わらないため、ページ表示速度に影響する可能性がある
2. picture要素やsrcset属性による画像切り替え
例1: National Geographic
-
特徴: 画面サイズに応じて最適化された画像が読み込まれるため、ページ表示速度の向上に貢献しています。高画質な画像を扱うサイトに適しています。
例2: Unsplash
-
特徴: srcset属性を用いて、異なる解像度の画像を用意しています。デバイスの表示能力に合わせた画像が読み込まれるため、高画質な表示とページ表示速度の両立を実現しています。
メリット
-
表示デバイスに最適な画像を表示できる
-
ページ表示速度の向上に繋がる
デメリット
-
HTMLの記述量が増加する
3. JavaScriptによる条件分岐
例1: Airbnb
-
特徴: 画面サイズやユーザーのスクロール位置に応じて、動的に背景画像を変更しています。よりインタラクティブな表現を実現したい場合に有効です。
メリット
-
より複雑な条件分岐による切り替えが可能
-
動的な表現が可能
デメリット
-
実装が複雑になる場合がある
-
JavaScriptが無効な環境では正常に動作しない可能性がある
5. まとめ
background-imageレスポンシブ切り替えは、ウェブサイトを様々なデバイスに対応させるための有効な手段です。ぜひ、本記事を参考に、あなたのウェブサイトにも実装してみてください。
その他の参考記事:background image レスポンシブ